<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Form Elements Autotabs - Photon Admin Panel Theme</title>
                <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
        <link rel="shortcut icon" href="favicon.ico" />
        <link rel="apple-touch-icon" href="iosicon.png" />
<!--    DEVELOPMENT LESS -->
<!--    <link rel="stylesheet/less" href="css/photon.less" media="all" />
        <link rel="stylesheet/less" href="css/photon-responsive.less" media="all" />-->
<!--    PRODUCTION CSS -->
        <link rel="stylesheet" href="css/css_compiled/photon-min.css" media="all" />
        <link rel="stylesheet" href="css/css_compiled/photon-min-part2.css" media="all" />
        <link rel="stylesheet" href="css/css_compiled/photon-responsive-min.css" media="all" />

<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="css/css_compiled/ie-only-min.css" />
<![endif]-->

<!--[if lt IE 9]>
        <link rel="stylesheet" type="text/css" href="css/css_compiled/ie8-only-min.css" />
        <script type="text/javascript" src="js/plugins/excanvas.js"></script>
        <script type="text/javascript" src="js/plugins/html5shiv.js"></script>
        <script type="text/javascript" src="js/plugins/respond.min.js"></script>
        <script type="text/javascript" src="js/plugins/fixFontIcons.js"></script>
<![endif]-->
        
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.pnotify.min.js"></script>

<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="js/plugins/less-1.3.1.min.js"></script>        
<script type="text/javascript" src="js/plugins/xbreadcrumbs.js"></script>
<script type="text/javascript" src="js/plugins/jquery.maskedinput-1.3.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.autotab-1.1b.js"></script>
<script type="text/javascript" src="js/plugins/charCount.js"></script>
<script type="text/javascript" src="js/plugins/jquery.textareaCounter.js"></script>
<script type="text/javascript" src="js/plugins/elrte.min.js"></script>
<script type="text/javascript" src="js/plugins/elrte.en.js"></script>
<script type="text/javascript" src="js/plugins/select2.js"></script>
<script type="text/javascript" src="js/plugins/jquery-picklist.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/plugins/additional-methods.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.form.js"></script>
<script type="text/javascript" src="js/plugins/jquery.metadata.js"></script>
<script type="text/javascript" src="js/plugins/jquery.mockjax.js"></script>
<script type="text/javascript" src="js/plugins/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.rating.pack.js"></script>
<script type="text/javascript" src="js/plugins/farbtastic.js"></script>
<script type="text/javascript" src="js/plugins/jquery.timeentry.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.jstree.js"></script>
<script type="text/javascript" src="js/plugins/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="js/plugins/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.mCustomScrollbar.js"></script>
<script type="text/javascript" src="js/plugins/jquery.flot.js"></script>
<script type="text/javascript" src="js/plugins/jquery.flot.stack.js"></script>
<script type="text/javascript" src="js/plugins/jquery.flot.pie.js"></script>
<script type="text/javascript" src="js/plugins/jquery.flot.resize.js"></script>
<script type="text/javascript" src="js/plugins/raphael.2.1.0.min.js"></script>
<script type="text/javascript" src="js/plugins/justgage.1.0.1.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.clock.js"></script>
<script type="text/javascript" src="js/plugins/jquery.countdown.js"></script>
<script type="text/javascript" src="js/plugins/jquery.jqtweet.js"></script>
<script type="text/javascript" src="js/plugins/jquery.cookie.js"></script>
<script type="text/javascript" src="js/plugins/bootstrap-fileupload.min.js"></script>
<script type="text/javascript" src="js/plugins/prettify/prettify.js"></script>

<script type="text/javascript" src="js/common.js"></script>
        
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

    <body class="body-inner">
            
    <div class="btn-toolbar btn-mobile-menus">
        <button class="btn btn-main-menu"></button>
        <button class="btn btn-user-menu"><i class="icon-logo"></i></button>
    </div>

    <div class="nav-fixed-left" style="visibility: hidden">
        <ul class="nav nav-side-menu">
            <li class="shadow-layer"></li>
            <li>
                <a href="dashboard.php">
                    <i class="icon-photon home"></i>
                    <span class="nav-selection">Dashboard</span>
                                    </a>
            </li>
            <li>
                <a href="javascript:;" class="sub-nav-container">
                    <i class="icon-photon list_nested"></i>
                    <span class="nav-selection">Form Elements</span>
                    <i class="icon-menu-arrow"></i>                </a>
                <div class="sub-nav">
                    <ul class="nav">
                        <li>
                            <a href="form-elements-input-fields.php">Input Fields</a>
                        </li>
                        <li>
                            <a href="form-elements-masked-input-fields.php">Masked Input Fields</a>
                        </li>
                        <li>
                            <a href="form-elements-autotabs.php">Autotabs</a>
                        </li>
                        <li>
                            <a href="form-elements-text-areas.php">Text Areas</a>
                        </li>
                        <li>
                            <a href="form-elements-select-menus.php">Select Menus</a>
                        </li>
                        <li>
                            <a href="form-elements-other-form-elements.php">Other Form Elements</a>
                        </li>
                        <li>
                            <a href="form-elements-form-validation.php">Form Validation</a>
                        </li>
                        <li>
                            <a href="form-elements-ui-elements.php">UI Elements</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" class="sub-nav-container">
                    <i class="icon-photon chart_alt"></i>
                    <span class="nav-selection">Graphs and Statistics</span>
                    <i class="icon-menu-arrow"></i>                </a>
                <div class="sub-nav">
                    <ul class="nav">
                        <li>
                            <a href="graphs-and-statistics-graphs.php">Graphs</a>
                        </li>
                        <li>
                            <a href="graphs-and-statistics-statistical-elements.php">Statistical Elements</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="typography.php">
                    <i class="icon-photon book_alt2"></i>
                    <span class="nav-selection">Typography</span>
                                    </a>
            </li>
            <li>
                <a href="grid.php">
                    <i class="icon-photon hash"></i>
                    <span class="nav-selection">Grid</span>
                                    </a>
            </li>
            <li>
                <a href="tables.php">
                    <i class="icon-photon new_window"></i>
                    <span class="nav-selection">Tables</span>
                                    </a>
            </li>
            <li>
                <a href="maps.php">
                    <i class="icon-photon map_pin_stroke"></i>
                    <span class="nav-selection">Maps</span>
                                    </a>
            </li>
            <li>
                <a href="sidebar-widgets.php">
                    <i class="icon-photon book_alt"></i>
                    <span class="nav-selection">Sidebar Widgets</span>
                                    </a>
            </li>
            <li>
                <a href="javascript:;" class="sub-nav-container">
                    <i class="icon-photon bolt"></i>
                    <span class="nav-selection">Error Pages</span>
                    <i class="icon-menu-arrow"></i>                </a>
                <div class="sub-nav">
                    <ul class="nav">
                        <li>
                            <a href="error-pages-400-bad-request.php">400 Bad Request</a>
                        </li>
                        <li>
                            <a href="error-pages-401-unauthorized.php">401 Unauthorized</a>
                        </li>
                        <li>
                            <a href="error-pages-403-forbidden.php">403 Forbidden</a>
                        </li>
                        <li>
                            <a href="error-pages-404-page-not-found.php">404 Page Not Found</a>
                        </li>
                        <li>
                            <a href="error-pages-500-internal-server-error.php">500 Internal Server Error</a>
                        </li>
                        <li>
                            <a href="error-pages-503-service-unavailable.php">503 Service Unavailable</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="help.php">
                    <i class="icon-photon info"></i>
                    <span class="nav-selection">Help</span>
                                    </a>
            </li>
            <li class="nav-logout">
                <a href="/">
                    <i class="icon-photon key_stroke"></i><span class="nav-selection">Logout</span>
                </a>
            </li>
        </ul>
    </div>        <div class="nav-fixed-topright" style="visibility: hidden">
    <ul class="nav nav-user-menu">
        <li class="user-sub-menu-container">
            <a href="javascript:;">
                <i class="user-icon"></i><span class="nav-user-selection">Company Name</span><i class="icon-menu-arrow"></i>
            </a>
                        <ul class="nav user-sub-menu">
                                <li>
                    <a href="javascript:;">My Profile</a>
                </li>
                                <li>
                    <a href="javascript:;">Settings</a>
                </li>
                                <li>
                    <a href="javascript:;">Messages</a>
                </li>
                                <li>
                    <a href="javascript:;">Help</a>
                </li>
                            </ul>
                    </li>
        <li>
            <a href="javascript:;">
                <i class="icon-photon mail"></i>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <i class="icon-photon comment_alt2_stroke"></i>
                <div class="notification-count">12</div>
            </a>
        </li>
    </ul>
</div>

<script>
    $(function(){
        setTimeout(function(){
            $('.nav-fixed-topright').removeAttr('style');
        }, 300);
        
        $(window).scroll(function(){
            if($('.breadcrumb-container').length){
                var scrollState = $(window).scrollTop();
                if (scrollState > 0) $('.nav-fixed-topright').addClass('nav-released');
                else $('.nav-fixed-topright').removeClass('nav-released')
            }
        });
        
        $('.user-sub-menu-container').on('click', function(){
            $(this).toggleClass('active-user-menu');
        });
    });
</script>

        
<div class="panel">
    <div class="panel-content filler">
        <div class="panel-logo"></div>
        <div class="panel-header">
            <h1><small>Autotabs</small></h1>
            <button type="submit" class="btn btn-mini"><i class="icon-photon move_alt2"></i> Add New</button>
        </div>
        <div class="panel-search container-fluid">
            <form class="form-horizontal" action="javascript:;" />
                <input id="panelSearch" placeholder="Search" type="text" name="panelSearch" />
                <button class="btn btn-search"></button>
                <script>
                    $().ready(function(){
                        var searchTags = [
                            "Dashboard",
                            "Form Elements",
                            "Graphs and Statistics",
                            "Typography",
                            "Grid",
                            "Tables",
                            "Maps",
                            "Sidebar Widgets",
                            "Error Pages",
                            "Help",
                            "Input Fields",
                            "Masked Input Fields",
                            "Autotabs",
                            "Text Areas",
                            "Select Menus",
                            "Other Form Elements",
                            "Form Validation",
                            "UI Elements",
                            "Graphs",
                            "Statistical Elements",
                            "400 Bad Request",
                            "401 Unauthorized",
                            "403 Forbidden",
                            "404 Page Not Found",
                            "500 Internal Server Error",
                            "503 Service Unavailable"
                        ];
                        $( "#panelSearch" ).autocomplete({
                            source: searchTags
                        });
                    });            
                </script>
            </form>
        </div>
                <script type="text/javascript">
            $(function () {
                $("#jstree").jstree({ 
                    "json_data" : {
                        "data" : [
                                                        {
                                "data" : { 
                                    "title" : "Phone Number", 
                                    "attr" : { "href" : "#Phone_Number" } 
                                }
                            },
                                                        {
                                "data" : { 
                                    "title" : "Social Security Number", 
                                    "attr" : { "href" : "#Social_Security_Number" } 
                                }
                            },
                                                        {
                                "data" : { 
                                    "title" : "Text Characters Only", 
                                    "attr" : { "href" : "#Text_Characters_Only" } 
                                }
                            },
                                                        {
                                "data" : { 
                                    "title" : "Alpha Characters Only", 
                                    "attr" : { "href" : "#Alpha_Characters_Only" } 
                                }
                            },
                                                        {
                                "data" : { 
                                    "title" : "Uppercase Letters and Numbers", 
                                    "attr" : { "href" : "#Uppercase_Letters_and_Numbers" } 
                                }
                            },
                                                        {
                                "data" : { 
                                    "title" : "Any and All Characters", 
                                    "attr" : { "href" : "#Any_and_All_Characters" } 
                                }
                            },
                                                        {
                                "data" : { 
                                    "title" : "Regular Expression (Allows Numbers and Periods)", 
                                    "attr" : { "href" : "#Regular_Expression_(Allows_Numbers_and_Periods)" } 
                                }
                            },
                                                    ]
                    },
                    "plugins" : [ "themes", "json_data", "ui" ]
                })
                .bind("click.jstree", function (event) {
                    var node = $(event.target).closest("li");
                    document.location.href = node.find('a').attr("href");
                    return false;
                })
                .delegate("a", "click", function (event, data) { event.preventDefault(); });
            });
        </script>
        <div class="sidebarMenuHolder">
            <div class="JStree">
                <div class="Jstree_shadow_top"></div>
                <div id="jstree"></div>
                <div class="Jstree_shadow_bottom"></div>
            </div>
        </div>
    </div>
    <div class="panel-slider">
        <div class="panel-slider-center">
            <div class="panel-slider-arrow"></div>
        </div>
    </div>
</div>
        <div class="main-content">
            <div class="breadcrumb-container">
    <ul class="xbreadcrumbs">
        <li>
            <a href="dashboard.php">
                <i class="icon-photon home"></i>
            </a>
        </li>
                <li>
            <a href="#">Form Elements</a>
            <ul class="breadcrumb-sub-nav">
                                <li>
                    <a href="form-elements-input-fields.php">Input Fields</a>
                </li>
                                <li>
                    <a href="form-elements-masked-input-fields.php">Masked Input Fields</a>
                </li>
                                <li>
                    <a href="form-elements-autotabs.php">Autotabs</a>
                </li>
                                <li>
                    <a href="form-elements-text-areas.php">Text Areas</a>
                </li>
                                <li>
                    <a href="form-elements-select-menus.php">Select Menus</a>
                </li>
                                <li>
                    <a href="form-elements-other-form-elements.php">Other Form Elements</a>
                </li>
                                <li>
                    <a href="form-elements-form-validation.php">Form Validation</a>
                </li>
                                <li>
                    <a href="form-elements-ui-elements.php">UI Elements</a>
                </li>
                            </ul>
        </li>
                <li class="current">
            <a href="javascript:;">Autotabs</a>
        </li>
    </ul>
</div>            <header>
                <i class="icon-big-notepad"></i>
                <h2><small>Autotabs</small></h2>
                <h3><small>Autotab is a jQuery plugin that provides auto-tabbing and filtering on text fields in a form.</small></h3>
            </header>
            <form class="form-horizontal" />
                <div class="container-fluid">

                        <div class="form-legend">Input Fields</div>

                        <!--Phone Number begin-->
                        <div id="Phone_Number" class="control-group row-fluid">
                            <div class="span3">
                                <label class="control-label" for="inputPhone-0">Phone Number</label>
                            </div>
                            <div class="span9">
                                <div class="controls">
                                    <input id="inputPhone-0" maxlength="3" size="3" type="text" class="input-small" name="inputData" /> - 
                                    <input id="inputPhone-2" maxlength="3" size="3" type="text" class="input-small" name="inputData" /> - 
                                    <input id="inputPhone-1" maxlength="3" size="3" type="text" class="input-small" name="inputData" />
                                    <script>
                                        $(document).ready(function(){
                                            $("input[id^=inputPhone]").autotab_magic().autotab_filter("numeric");
                                        });
                                    </script>
                                </div>
                            </div>
                        </div>
                        <!--Phone Number end-->
                        
                        <!--Social Security Number begin-->
                        <div id="Social_Security_Number" class="control-group row-fluid">
                            <div class="span3">
                                <label class="control-label" for="inputSS-0">Social Security Number</label>
                            </div>
                            <div class="span9">
                                <div class="controls">
                                    <input id="inputSS-0" maxlength="3" size="3" type="text" class="input-small" /> - 
                                    <input id="inputSS-2" maxlength="2" size="3" type="text" class="input-small" /> - 
                                    <input id="inputSS-1" maxlength="4" size="5" type="text" class="input-small" />
                                    <script>
                                        $(document).ready(function(){
                                            $("input[id^=inputSS]").autotab_magic().autotab_filter("numeric");
                                        });
                                    </script>
                                </div>
                            </div>
                        </div>
                        <!--Social Security Number end-->
                        
                        <!--Text Characters begin-->
                        <div id="Text_Characters_Only" class="control-group row-fluid">
                            <div class="span3">
                                <label class="control-label" for="inputTC-0">Text Characters Only</label>
                            </div>
                            <div class="span9">
                                <div class="controls">
                                    <input id="inputTC-0" maxlength="3" size="3" type="text" class="input-small" /> - 
                                    <input id="inputTC-2" maxlength="3" size="3" type="text" class="input-small" /> - 
                                    <input id="inputTC-1" maxlength="3" size="5" type="text" class="input-small" />
                                    <script>
                                        $(document).ready(function(){
                                            $("input[id^=inputTC]").autotab_magic().autotab_filter("text");
                                        });
                                    </script>
                                </div>
                            </div>
                        </div>
                        <!--Text Characters end-->

                        <!--Alpha Characters Only begin-->
                        <div id="Alpha_Characters_Only" class="control-group row-fluid">
                            <div class="span3">
                                <label class="control-label" for="inputAlpha-0">Alpha Characters Only</label>
                            </div>
                            <div class="span9">
                                <div class="controls">
                                    <input id="inputAlpha-0" maxlength="3" size="3" type="text" class="input-small" /> - 
                                    <input id="inputAlpha-2" maxlength="3" size="3" type="text" class="input-small" /> - 
                                    <input id="inputAlpha-1" maxlength="3" size="5" type="text" class="input-small" />
                                    <script>
                                        $(document).ready(function(){
                                            $("input[id^=inputAlpha]").autotab_magic().autotab_filter("alpha");
                                        });
                                    </script>
                                </div>
                            </div>
                        </div>
                        <!--Alpha Characters Only end-->

                        <!--Uppercase Letters and Numbers begin-->
                        <div id="Uppercase_Letters_and_Numbers" class="control-group row-fluid">
                            <div class="span3">
                                <label class="control-label" for="inputUCN-0">Uppercase letters and numbers</label>
                            </div>
                            <div class="span9">
                                <div class="controls">
                                    <input id="inputUCN-0" maxlength="3" size="3" type="text" class="input-small" /> - 
                                    <input id="inputUCN-2" maxlength="3" size="3" type="text" class="input-small" /> - 
                                    <input id="inputUCN-1" maxlength="3" size="3" type="text" class="input-small" />
                                    <script>
                                        $(document).ready(function(){
                                            $("input[id^=inputUCN]").autotab_magic().autotab_filter({ format: "alphanumeric", uppercase: true });
                                        });
                                    </script>
                                </div>
                            </div>
                        </div>
                        <!--Uppercase Letters and Numbers end-->

                        <!--Any and All Characters begin-->
                        <div id="Any_and_All_Characters" class="control-group row-fluid">
                            <div class="span3">
                                <label class="control-label" for="inputAll-0">Any and all characters</label>
                            </div>
                            <div class="span9">
                                <div class="controls">
                                    <input id="inputAll-0" maxlength="3" size="3" type="text" class="input-small" /> - 
                                    <input id="inputAll-2" maxlength="3" size="3" type="text" class="input-small" /> - 
                                    <input id="inputAll-1" maxlength="3" size="3" type="text" class="input-small" />
                                    <script>
                                        $(document).ready(function(){
                                            $("input[id^=inputAll]").autotab_magic();
                                        });
                                    </script>
                                </div>
                            </div>
                        </div>
                        <!--Any and All Characters end-->

                        <!--Regular Expression (Allows Numbers and Periods) begin-->
                        <div id="Regular_Expression_(Allows_Numbers_and_Periods)" class="control-group row-fluid">
                            <div class="span3">
                                <label class="control-label" for="inputRegex">Regular Expression (Allows Numbers and Periods)</label>
                            </div>
                            <div class="span9">
                                <div class="controls">
                                    <input id="inputRegex" maxlength="10" size="10" type="text" class="input-xlarge-customized" />
                                    <script>
                                        $(document).ready(function(){
                                            $("input[id^=inputRegex]").autotab_magic().autotab_filter({ format: 'custom', pattern: '[^0-9\.]' });;
                                        });
                                    </script>
                                </div>
                            </div>
                        </div>
                        <!--Regular Expression (Allows Numbers and Periods) end-->

                </div><!-- end container -->
            </form>
        </div>
    <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-1936460-27']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
    </body>
</html>